<script lang="ts" setup>
import { differenceWith, isEqual, difference } from 'lodash-es';
import { computed, onMounted, ref, watch } from 'vue';
import { Icategory } from '../../tuyav2/interface';
import { DeviceFunctionServiceCommandParam, DeviceServiceDetailResult, DeviceStatusServiceStatusListResult } from '../interface';
import { assign, throttle } from 'lodash-es'
import { slidervalue, _slidervalue } from '../../tuyav2/statedata';
import { ElSlider } from 'element-plus'
const p = defineProps<{
    device: DeviceServiceDetailResult, list?: DeviceStatusServiceStatusListResult, commands: (devicelistoption: DeviceFunctionServiceCommandParam) => void, reset: (v: DeviceServiceDetailResult) => void, tuyastate: Icategory[]
    specificationFunction: SpecificationResultFunction[]
    specificationStatus: SpecificationResultStatus[],

}>()

interface SetStatus extends Icategory {
    "value": number
}
const setstatus = ref([])

const slidershow = ref(false)

onMounted(() => {
    _setstatus()
})
function __setstatus() {
    slidershow.value = false
    const _data = p.list?.status || []

    // 过滤所有状态
    let tmp: SetStatus[] = [];
    _data.forEach(data => {
        const _data = p.specificationStatus.find(v => v.code == data.code)
        const n = JSON.parse(_data?.values || '{}')
        const e = p.tuyastate.find(c => c.name === p.device.category && c.code === data.code) || {}
        let options = []
        if (n) {
            options = n.range?.map(c => {
                return {
                    label: c,
                    value: c
                }
            })
        }
        if (e?.options) {
            options = e.options
        }

        const f = assign({}, { ...n }, { type: e.type, show: e.show, showControl: e.showControl, dataname: e.dataname, disable: e.disable, options }, { value: data?.value, code: data?.code })
        if (f.type === "slider") {
            if (Object.keys(f).includes('max')) {
                f.max = slidervalue(Number(f.max), f.scale)
            }
            if (Object.keys(f).includes('min')) {
                f.min = slidervalue(Number(f.min), f.scale)
            }
            if (Object.keys(f).includes('step')) {
                f.step = slidervalue(Number(f.step), f.scale)
            }
            if (Object.keys(f).includes('value')) {
                f.value = slidervalue(Number(f.value), f.scale)
            }
        }
        tmp.push(f)
    })

    setstatus.value = tmp
    slidershow.value = true
}
const _setstatus = throttle(__setstatus, 50, { trailing: true })



watch(() => p.list?.status, f => {
    _setstatus()
}, {
    deep: true
})

watch(p.device, e => {
    _setstatus()
}, {
    deep: true
})

watch(() => p.specificationStatus, e => {
    _setstatus()
}, {
    deep: true
})

function commands() {
    const data = differenceWith(setstatus.value.map(e => {
        if (e.type === "slider") {
            return {
                code: e.code,
                value: _slidervalue(e.value, e.scale)
            }
        }
        return {
            code: e.code,
            value: e.value
        }
    }), p.list?.status || [], isEqual).filter(c => c.code)
    console.log(data)
    p.commands({ device_id: p.device.id, commands: data })
}

function change(c) {
    console.log(c)
}

</script>

<template>
    <div class="instruct">
        <div class="instruct-container">
            <div v-for="i in setstatus" v-show="i.type">
                <div v-if="i.type === 'switchs'" class="instructswitch">
                    <div class="label">{{ i.dataname }}</div>
                    <div class="instruct-switch">
                        <a-switch :disabled="i.disable" v-model:checked="i.value"></a-switch>
                    </div>
                </div>
                <div v-else-if="i.type === 'select'" class="instructselect">
                    <div class="label">{{ i.dataname }} </div>
                    <div class="instruct-select">
                        <a-select optionLabelProp="label" :disabled="i.disable" v-model:value="i.value"
                            style="width: 100%">
                            <a-select-option v-for="item in i.options" :key="item.value" :label="item.label"
                                :value="item.value">
                                {{ item.label }}
                            </a-select-option>
                        </a-select>
                    </div>
                </div>
                <div v-else-if="i.type === 'slider'" class="instructslider">
                    <div class="label">
                        {{ i.dataname }}
                        <span v-show="i.max" class="instructslider-span">({{ i.min }} - {{ i.max }}{{ i.unit }})</span>
                    </div>
                    <div class="instruct-slider">
                        <a-row type="flex" justify="space-between">
                            <a-col :span="16" v-if="slidershow">
                                <el-slider size="small" v-model="i.value" :disabled="i.disable" :max="i.max"
                                    :min="i.min"></el-slider>
                            </a-col>
                            <a-col :span="2"></a-col>
                            <a-col>
                                <a-input-number v-model:value="i.value" :min="i.min" :max="i.max" :disabled="i.disable"
                                    :step="i.step" show-input />
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ft">
        <a-button @click="() => p.reset(p.device)">重置</a-button>
        <a-button type="primary" @click="() => commands()">发送指令</a-button>
    </div>
</template>

<style scoped>
.label {
    /* flex: 1 0 0%; */
    color: #262626;
    line-height: 40px;
    font-size: 14px;
}

.instruct {
    padding: 20px;
    height: calc(100vh - 200px);
    overflow: auto;
}

.instruct-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.instructslider-span {
    color: #aaa;
}


/* Rectangle 393 */


.ft button {
    margin: 0 8px;
}

.ft {
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -3px 2px 0 rgba(0, 0, 0, .05);
    flex: none;
    padding: 8px;
    text-align: right;
}
</style>